<template>
	<!-- 农产品评价-->
	<el-tabs type="border-card" class="criticism">
		<el-tab-pane>
			<span slot="label" style="font-size: 20px;"><i class="el-icon-chat-line-square"></i>评价({{evaluateSum}})</span>
			<div class="block">
				<div class="Score">
					<span class="pingfen">用户点评</span>
					<el-rate v-model="value" :colors="colors" show-score disabled text-color="#ff0000"  @change="test">
					</el-rate>
				</div>
				<el-radio-group v-model="activeName" @change="clickChange">
					<el-radio-button label="全部"></el-radio-button>
					<el-radio-button label="四星五星"></el-radio-button>
					<el-radio-button label="三星"></el-radio-button>
					<el-radio-button label="一星二星"></el-radio-button>
				</el-radio-group>
			</div>
			<div class="box-card">
				<div v-for="(item,index) in houseEvaluate" :key="index" class="contBody">
					<div class="user">
						<el-avatar :src="$store.state.imgShowRoad2 + '/file/' + item.avatar"></el-avatar>
						<span style="margin-left: 5px;">{{item.nickname}}</span>
					</div>
					<div class="content">
						<el-rate v-model="item.score" :colors="colors" disabled>
						</el-rate>
						<span class="evaContent">{{item.content}}</span>
						<div class="specification">
							<span>游玩天数:{{item.playDay}}&nbsp;天</span>
							<span>{{item.createTime}}</span>
						</div>
					</div>
				</div>
				<div class="page" v-if="activeName==='全部'">
					<el-pagination  @current-change="handleCurrentChange" :current-page="currentPage"
						:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
				</div>
				<div class="page" v-if="activeName==='四星五星'">
					<el-pagination  @current-change="handleCurrentChange1" :current-page="currentPage"
						:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
				</div>
				<div class="page" v-if="activeName==='三星'">
					<el-pagination  @current-change="handleCurrentChange2" :current-page="currentPage"
						:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
				</div>
				<div class="page" v-if="activeName==='一星二星'">
					<el-pagination  @current-change="handleCurrentChange3" :current-page="currentPage"
						:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
				</div>
			</div>
		</el-tab-pane>
	</el-tabs>
</template>

<script>
	import evaluateApi from "@/api/houseEvaluate.js"
	export default {
		props: {
			HouseInfo:{}
		},
		data() {
			return {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				value: 0,
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				selectBtn: true,
				activeName: '全部',
				houseEvaluate: [],
				evaluateSum: 0
			}
		},
		watch: {
			houseEvaluate: {
				handler(val) {
					// 当 houseEvaluate 数组发生变化时，将第一个对象的内容赋值给 value
					if (val.length > 0) {
						this.value = val[0].averageMarks;
						this.evaluateSum = val[0].evaluateSum;
					}
				},
			}
		},
		methods: {
			test(value) {
				console.log(value)
			},
			clickChange(val) {
				if (val === "全部") {
					this.currentPage= 1;
					this.pageSize=10;
					this.getHouseEvaluateAll();
				}
				if (val === "四星五星") {
					this.currentPage= 1;
					this.pageSize=10;
					this.activeName = "四星五星";
					this.getHouseEvaluateFourAndFive();
				}
				if (val === "三星") {
					this.currentPage= 1;
					this.pageSize=10;
					this.activeName = "三星";
					this.getHouseEvaluateThree();
				}
				if (val === "一星二星") {
					this.currentPage= 1;
					this.pageSize=10;
					this.activeName = "一星二星";
					this.getHouseEvaluateOneAndTow();
				}
			},
			async getHouseEvaluateAll() {
				const res = await evaluateApi.getHouseEvaluateAll("/ZnHouseEvaluate/getHouseEvaluateAll", {
					houseId: this.$parent.getId(),
					createPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.houseEvaluate = res.data.records;
					this.total = res.data.total;
				} else {
					this.$notify({
						title: '失败',
						message: '数据异常',
						type: "error",
						offset: 100
					});
				}
			},
			async getHouseEvaluateFourAndFive() {
				const res = await evaluateApi.getHouseEvaluateFourAndFive("/ZnHouseEvaluate/getHouseEvaluateFourAndFive", {
					houseId: this.$parent.getId(),
					createPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.houseEvaluate = res.data.records;
					this.total = res.data.total;
				} else {
					this.$notify({
						title: '失败',
						message: '数据异常',
						type: "error",
						offset: 100
					});
				}
			},
			async getHouseEvaluateThree() {
				const res = await evaluateApi.getHouseEvaluateThree("/ZnHouseEvaluate/getHouseEvaluateThree", {
					houseId: this.$parent.getId(),
					createPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.houseEvaluate = res.data.records;
					this.total = res.data.total;
				} else {
					this.$notify({
						title: '失败',
						message: '数据异常',
						type: "error",
						offset: 100
					});
				}
			},
			async getHouseEvaluateOneAndTow() {
				const res = await evaluateApi.getHouseEvaluateOneAndTow("/ZnHouseEvaluate/getHouseEvaluateOneAndTow", {
					houseId: this.$parent.getId(),
					createPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.houseEvaluate = res.data.records;
					this.total = res.data.total;
				} else {
					this.$notify({
						title: '失败',
						message: '数据异常',
						type: "error",
						offset: 100
					});
				}
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.getHouseEvaluateAll();
			},
			handleCurrentChange1(page) {
				this.currentPage = page;
				this.getHouseEvaluateFourAndFive();
			},
			handleCurrentChange2(page) {
				this.currentPage = page;
				this.getHouseEvaluateThree();
			},
			handleCurrentChange3(page) {
				this.currentPage = page;
				this.getHouseEvaluateOneAndTow();
			},
		},
		created() {
			this.getHouseEvaluateAll();
		}
	}
</script>

<style lang="scss" scoped>
	.criticism {
		.block {
			display: flex;
			flex-direction: column;

			.Score {
				display: flex;
				align-items: center;
				padding: 0 0 20px;

				.pingfen {
					font-family: PingFangSC-Medium;
					font-size: 25px;
					color: #444;
					letter-spacing: 0;
					margin-right: 10px;
				}

				::v-deep .el-rate__icon {
					font-size: 25px;
				}

				::v-deep .el-rate__text {
					font-size: 20px;

				}
			}

			::v-deep .el-radio-button {
				margin-right: 15px;
			}

			::v-deep .el-radio-button__inner {
				border: 1px solid #DCDFE6;
				border-radius: 4px;
				box-shadow: none !important;
			}

		}

		.box-card {
			display: flex;
			flex-direction: column;

			.contBody {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 25px 0;
				border-top: 1px solid #f5f5f5;

				.user {
					font-family: PingFangSC-Regular;
					font-size: 12px;
					color: #646464;
					letter-spacing: 0;
					display: flex;
					align-items: center;
				}

				.content {
					display: flex;
					flex-direction: column;
					position: relative;
					width: calc(100% - 150px);

					.specification {
						margin-top: 10px;
						display: flex;
						justify-content: space-between;
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #909090;
						letter-spacing: 0;
					}

					::v-deep .el-rate__icon {
						font-size: 25px;
					}

					.evaContent {
						margin-top: 10px;
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #444;
						letter-spacing: 0;
					}

				}
			}

			.page {
				margin-top: 15px;
				display: flex;
				justify-content: center;
			}

		}
	}
</style>